<template>
  <div class="header">
    <div class="header-left"><div class="iconfont"> &#xe604;</div></div>
    <div class="header-input">
      <span class="iconfont"> &#xe60b;</span>输入城市/景点</div>
    <div class="header-right">城市<span class="iconfont">&#xe7aa;</span></div>
  </div>
</template>

<script>

  export default {
    name: 'HomeHeader'
  }

</script>

<style lang="stylus">
  @import "~styles/variable.styl"
  .header
    display :flex
    height: 0.86rem
    line-height :0.86rem
    background :$bgcolor
    color: white
    .header-left
      float: left
      width : 0.64rem
      .iconfont
        text-align center
        font-size .44rem
    .header-input
      background : white
      flex: 1
      border-radius : .1rem
      margin-top : .12rem
      margin-left : .2rem
      padding-left .1rem
      height : .64rem
      line-height : .64rem
      color: #ccc
    .header-right
      float : right
      width : 1.24rem
      text-align :center

</style>
